<template>
  <div id="limit">
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item of banner" :key="item._id">
        <router-link
          :to="{
            name: 'RecMainDetail',
            params: { _id: item._id },
            query: { collectionName: 'recBannerDetail' },
          }"
        >
          <img :src="$serveUrl + item.url" alt="" id="bimg" />
        </router-link>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      banner: [],
    };
  },
  mounted() {
    this.$axios({
      url: "/rec/main/recBanner",
      params: { _limit: 4 },
    }).then((res) => {
      this.banner = res.data;
    });
  },
  methods: {},
};
</script>

<style>
#limit {
  padding: 0.1rem;
  border-radius: 12%;
  overflow: hidden;
}
.van-swipe-item img {
  width: 100%;
  height: 100%;
}
</style>